<template>
  <div style="display: flex; align-items: center">
    <el-popover placement="right" :width="400" trigger="click">
      <template #reference>
        <el-button style="margin-right: 16px">粉丝</el-button>
      </template>
      <template #header>
        <div class="card-header">
          <span>粉丝</span>
        </div>
      </template>
      <div v-for="(item, index) in focusData" :key="index" class="text item">
        <br />
        <br />
        <div class="name" @click="chekInto(item.userId)">
          <el-avatar :size="50" :src="item.userHead" /><text>{{
            item.userName
          }}</text>
        </div>
        <br />
      </div>
      <br />
    </el-popover>
  </div>
</template>
<script setup>
import { defineProps, onMounted, ref, defineEmits } from 'vue'
import axios from 'axios'
import router from '@/router'
const props1 = defineProps(['userId'])
onMounted(() => {
  myInfor2()
})
const focusData = ref([])
const emit = defineEmits(['shuaxinPage'])
function myInfor2() {
  axios({
    url: 'http://localhost:8080/myFan/' + props1.userId,
    method: 'get',
    contentType: 'application/json',
    headers: {
      token: localStorage.getItem('token')
    }
  }).then(function (res) {
    focusData.value = res.data.data
    console.log('粉丝列表' + JSON.stringify(focusData.value))
  })
}

function chekInto(userId) {
  router.push('myMessage?userId=' + userId)
  emit('shuaxinPage')
}
</script>
